﻿<!doctype html>
<html>
<head>
	<title>onyx slideable sample</title>
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
	<style>
	</style>
</head>
<body class="onyx enyo-unselectable">
	<script>
		new (enyo.kind({
			name: "App",
			kind: "Control",
			classes: "enyo-unselectable enyo-fit",
			style: "overflow: hidden;",
			components: [
				{kind: "onyx.Slideable", axis: "h", unit: "%", min: -80, overMoving: false, classes: "enyo-fit", style: "background: red;", components: [
					{content: "drag left - right"}
				]},
				{name: "card", kind: "onyx.Slideable", axis: "v", unit: "%", max: 90, value: 90, classes: "enyo-fit rotated", style: "background: blue;", onAnimateFinish: "animateFinish", components: [
					{content: "drag up - down"}
				]}
			],
			animateFinish: function(inSender) {
				if (inSender.value == 0) {
					inSender.max = 0;
					inSender.min = -90;
				}
			}
		}))().write();
	</script>
</body>
</html>
